import React from 'react';

import { Link, useNavigate } from "react-router-dom";
import { ListGroup, Container, Row, Col, Button } from "react-bootstrap"
function App() {
  const navigate = useNavigate();
  const goCart = () => {
    let path = `/cart`;
    navigate(path);
  }

  return (
    <div className="App">
      <header className="App-header">

        <h2>Please follow below requirement to finish a demo.</h2><br />
        <p>
          We need a simple order system. The key features as below,<br /><br />
          <ListGroup as="ol" numbered>
            <ListGroup.Item as="li">Order list with infinite loading</ListGroup.Item>
            <ListGroup.Item as="li">Order detail to show product detail</ListGroup.Item>
            <ListGroup.Item as="li">Shopping cart with CURD for backend API, you can fake some data in your API, or just have a array on frontend.</ListGroup.Item>
          </ListGroup>
<br />
          Skill set need <code>React.js</code> with <code>Typescript</code>, <code>bootstrap</code> for UI css component. <br />
          Tips: you should use <code>Redux</code> for frontend MVC. <br />
          Delivery with whole source code. and whole source code should running on docker container. <br />
          Implement web API to build product list and invoke and render it by react client.
        </p>
        <Container>
          <Row>
            <Col className='center-center'>
              <Link to={`/list`}>go to the order list</Link>
            </Col>
            <Col className='center-center'><Button variant="outline-primary" onClick={() => navigate('/product/1')}>go to the produce 1</Button></Col>
            <Col className='center-center'><Button onClick={goCart} variant="primary">Go to the shopping cart</Button>
            </Col>
          </Row>
        </Container>
      </header>
    </div>
  );
}

export default App;
